<template>
	<view class="page">
		<!-- 主要内容区域 -->
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
			<!-- 教练信息卡片 -->
			<!-- <view class="coach-card">
				<view class="coach-info">
					<image class="coach-avatar" :src="coachAvatar" mode="aspectFill"></image>
					<view class="coach-detail">
						<view class="coach-name-wrap">
							<text class="coach-name">陈教练</text>
							<uni-icons type="contact" size="20" color="#3b82f6"></uni-icons>
						</view>
						<text class="coach-phone">电话：138 **** 5678</text>
						<view class="coach-tag">
							<text class="tag-text">教龄 5 年</text>
						</view>
					</view>
					<view class="exchange flex-center flex-column " @click="cgshow = true">
						<van-icon name="exchange" size="16" />
						切换
					</view>
				</view>
			</view> -->

			<!-- 搜索和筛选区 -->
			<!-- <view class="search-section">
				<view class="search-wrap">
					<u-search placeholder="搜索课程" v-model="searchText" :showAction="false"></u-search>
				</view>
				<view class="filter-wrap">
					<view class="view-toggle">
						<view v-for="(view, index) in viewOptions" :key="index"
							:class="['toggle-btn', currentView == view.value? 'active' : '']"
							@click="currentView = view.value">
							<text>{{ view.label }}</text>
						</view>
					</view>
					<select v-model="courseType">
						<option v-for="type in courseTypes" :value="type.value">{{ type.label }}</option>
					</select>
				</view>
			</view> -->
			<view  style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
				<view class="box_11">
					<view class="image-wrapper_7">
						<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
						</u-search>
					</view>
					<view class="label8_list"  @click="openFilter">
						<uni-icons type="settings" size="16"></uni-icons>
						<view class="label_88">
							<text>筛选</text>
						</view>
					</view>
				</view>
			</view>
		<view class="content" >
			<!-- <view class="course-list" v-if="currentView === 'list'">
				<view v-for="(course, index) in courseList" :key="index" class="course-item"
					@click="oncourse(course, index)">
					<view class="course-main">
						<view class="course-time">
							<text class="time-tag">{{ course.date }} {{ course.weekday }}</text>
							<text class="period-tag">{{ course.time }}</text>
						</view>
						<text class="course-name">{{ course.name }}</text>
						<view class="course-tags">
							<view class="info-tag">
								<uni-icons type="file" size="14" color="#666"></uni-icons>
								<text>{{ course.classId }}</text>
							</view>
							<view class="info-tag purple">
								<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
								<text>{{ course.className }}</text>
							</view>
							<view class="info-tag amber">
								<uni-icons type="staff" size="14" color="#d97706"></uni-icons>
								<text>{{ course.coachName }}</text>
							</view>
						</view>
					</view>
					<view class="course-status">
						<text :class="['status-tag', course.status === '已签到'? 'signed' : 'unsigned']">
							{{ course.status }}
						</text>
						<view class="attendance">
							<text>应到 {{ course.expectedCount }} 人</text>
							<text>实到 {{ course.actualCount || 0 }} 人</text>
							<text>假 {{ course.actualCount || 0 }} 人</text>
						</view>
					</view>
				</view>
			</view> -->
			<view class="" >
				<!-- <attend-calendar :lateddates='lateddates' :truancyeddates='truancyeddates' :chidaodates='chidaodates'
					@on-click="handleChildClick">
				</attend-calendar> -->
				<view class="calendar">
					<view class="top-bar">
						<view class="" style="display: flex;height: 70upx;flex-direction: row;  justify-content:  space-between;">
							<view class="" style="display: flex;height: 70upx;">
								<view class="top-bar-ym">{{ y }}{{ text.year }}{{ m + 1 }}{{ text.month }}</view>
								<view class="top-bar-ym1">已签 {{sign_num || 0}} / 已消 {{un_consume_num||0}} / 总课时 {{total_num||0}}</view>
							</view>
							<view class="" style="display: flex;height: 70upx;">
								<image class="top-change-month" @click="turning('prev')"
									src="https://sass-test.doit10019.com/upload/202504/09111703-55184959555042937.png?attname=zx12.png"></image>
								<image class="top-change-month" @click="turning('next')"
									src="https://sass-test.doit10019.com/upload/202504/09111713-50100962335184016.png?attname=zx13.png"></image>
							</view>
						</view>
					</view>

					<view class="week">
						<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
					</view>

					<view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
						<view :style="{ top: positionTop + 'upx' }" class="days">
							<view class="item" v-for="(item, index) in dates" :key="index">
								<view class="day" @click="selectOne(item)"
									:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`}">
									{{ item.date }}
								</view>
								<view class="late2" v-if="isTruancyed(item.year, item.month + 1, item.date)"></view>
								<!-- <view class="late1" v-if="omcddates(item.year, item.month + 1, item.date)"></view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="course-list" style="margin-top: 20rpx;">
					<view v-for="(course, index) in Cardlist" :key="index" class="course-item"
						@click="oncourse(course, index)">
						<view class="course-main">
							<view class="course-time">
								<text class="period-tag">{{ course.course_date }}</text>
								<text class="period-tag">{{ course.week_name }}</text>
								<text class="period-tag">{{ course.time_period }}</text>
							</view>
							<text class="course-name" style="color: #6f6f6f;">{{ course.class_id }}</text>
							<text class="course-name">{{ course.class_name }}</text>
							<view class="course-tags" style="font-size: 24rpx;">
								类型:{{ course.course_name }} 
							</view>
							<view class="course-tags" style="font-size: 24rpx;align-items: center;">
								校区:{{ course.area_name }} 
								<view class="info-tag amberz">
									<text>{{ course.consume_status_show || '' }}</text>
								</view>
								<view class="info-tag purple">
									<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
									<text>{{ course.coach_name || '' }}</text>
								</view>
							</view>
							<!-- <view class="course-tags"> -->
								<!-- <view class="info-tag">
									<uni-icons type="file" size="14" color="#666"></uni-icons>
									<text>ID{{ course.id || '' }}</text>
								</view> -->
								<!-- <view class="info-tag purple">
									<uni-icons type="person" size="14" color="#9333ea"></uni-icons>
									<text>{{ course.coach_name || '' }}</text>
								</view> -->
								<!-- <view class="info-tag amber">
									<uni-icons type="staff" size="14" color="#d97706"></uni-icons>
									<text>{{ course.classroom_name || '' }}</text>
								</view> -->
							<!-- </view> -->
						</view>
						<view class="course-status">
							<text :class="['status-tag', course.status === '3'? 'signed' : 'unsigned']">
								{{ course.status_show }}
							</text>
							<view class="attendance">
								<text>应到 {{ course.should_student_num }} 人</text>
								<text>实到 {{ course.act_student_num || 0 }} 人</text>
								<text>请假 {{ course.actualCount || 0 }} 人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 100%;height: 140rpx;"></view>
			</view>
		</view>
		<!-- 班级详情弹窗 -->
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closehomeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15" :safeAreaInsetTop="true" >
			<view class="tab-filter">
				<view class="tabs">
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 1}"
						@click="selectedTab22(1,0)">
						<text>待消课({{studentlist.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 2}"
						@click="selectedTab22(2,1)">
						<text>已消课({{completeList.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 3}"
						@click="selectedTab22(3,2)">
						<text>请假({{leaveList.length}})</text>
					</view>
				</view>
			</view>
			<scroll-view class="storepopup" style="height: 60vh;padding: 20rpx 20rpx;width: 660rpx;" scroll-y>
				<van-checkbox-group :value="selectList" @change.native="change">
					<view class="item" v-for="(item,index) in studentlist" :key="index" v-if="selected_Tab22 == 1"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>课消：</text> <input type="number" v-model="item.deduct_num"
														style="border: 1rpx #f5f5f5 solid;width: 100rpx;" />
												</view>
											</view>
										</view>
										<view @click="onleave(item,index)"
											style="width: 80rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 5rpx;text-align: center;">
											请假</view>
		
									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="number" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
					<view class="item" v-for="(item,index) in completeList" :key="index" v-if="selected_Tab22 == 2"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;margin-left: 10rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>课消：{{item.deduct_num}}</text>
												</view>
											</view>
										</view>
		
									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="text" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
					<view class="item" v-for="(item,index) in leaveList" :key="index" v-if="selected_Tab22 == 3"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
											</view>
										</view>
										<view @click="revert_leave(item)"
											style="width: 80rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 5rpx;text-align: center;">
											撤销</view>
		
									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="number" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
				</van-checkbox-group>
			</scroll-view>
			<view class="enroll-detail-footer">
				<view class="footer flex-space-between" style="padding: 20rpx;">
					<view class="" v-if="selected_Tab22 == 1">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange1">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" v-if="selected_Tab22 == 2">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange2">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" v-if="selected_Tab22 == 3">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange3">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" @click.stop="handAskLeave(2)" v-if="selected_Tab22 == 1">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交消课</button>
					</view>
					<view class="" @click.stop="revertSub(2)" v-if="selected_Tab22 == 2">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交撤销</button>
					</view>
					<view class="" @click.stop="revertSub(3)" v-if="selected_Tab22 == 3">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交撤销</button>
					</view>
				</view>
			</view>
		</u-popup>
		<van-popup closeable :show="show" round position="bottom" @close="show = false">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
		<van-popup closeable :show="cgshow" round position="bottom" @close="cgshow = false">
			<view class="good-box">
				<view class="title">
					切换教练
				</view>
				<scroll-view class="student-list" scroll-y >
					<view v-for="(item,index) in coachlist" :key="index" @click="chooseStudent(item)"
						class="student-item flex-align">
						<u-avatar size="100rpx" :src="item.coach_avatar">
						</u-avatar>
						<view style="margin-left: 30rpx">
							<view class="flex-align">
								<view class="name">{{item.full_name}}</view>
								<view class="name_s">{{item.age}}</view>
								<view class="course_s" v-if="item.sex == 0">未知</view>
								<view class="course_s" v-if="item.sex == 1">男</view>
								<view class="course_s" v-if="item.sex == 2">女</view>
				
								<!-- <u-icon :name="item.student_info['性别'] === '男' ? 'man' : 'woman'" size="30rpx" :color="
					        item.student_info['性别'] === '男' ? '#016dff' : '#ff0178'
					      "></u-icon> -->
							</view>
							<view class="course">{{item.coach_honor}}</view>
							<view class="course">{{item.venue}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</van-popup>
		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehome_Info" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<view class="filter-item">
					<text class="filter-label">校区选择</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.venue_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId2 === index? 'active' : '']"
								v-for="(item,index) in weekList2" :key="index" @click="timesSelect2(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 	<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId5 === index? 'active' : '']"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">教练</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId4 === index? 'active' : '']"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.coach_name}}
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</u-popup>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="plbatch"
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ff4040 1rpx solid">
				批量操作
			</view>
			
			<view class="" @click="addstudent"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				添加课表
			</view>
		</view>
		
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				itemChooselist:{},
				venuelist:[],
				show: false,
				coachAvatar: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/782cf5cde63dddaa6434ab862fc4808066e329b2.png',
				searchText: '',
				currentView: 'list',
				courseType: '',
				viewOptions: [{
						label: '列表视图',
						value: 'list'
					},
					{
						label: '日历视图',
						value: 'calendar'
					}
				],
				courseTypes: [{
						label: '全部课程',
						value: 'all'
					},
					{
						label: '力量训练',
						value: 'strength'
					},
					{
						label: '有氧运动',
						value: 'cardio'
					},
					{
						label: '瑜伽',
						value: 'yoga'
					}
				],
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				currentDate: new Date(),
				monthCourses: {
					15: [{
							name: '初级力量训练',
							time: '09:00-10:30',
							classId: 'ST001',
							expectedCount: 15,
							actualCount: 13,
							status: '已签到',
							className: '第一期'
						},
						{
							name: '瑜伽基础',
							time: '14:00-15:30',
							classId: 'YG001',
							expectedCount: 12,
							actualCount: 0,
							status: '未开始',
							className: '第二期'
						}
					],
					20: [{
						name: '高强度循环训练',
						time: '10:00-11:30',
						classId: 'HI001',
						expectedCount: 10,
						actualCount: 8,
						status: '已签到',
						className: '第三期'
					}]
				},
				selectedDate: null,
				courseList: [],
				enrollDetailPopup: false,
				venuelist: [], //场馆列表
				// chidaodates: ['2025-5-25', '2025-5-3', '2025-5-17', ],
				truancyeddates: ['2025-4-25', '2025-4-18', '2025-4-20', '2025-5-11', '2025-5-8', '2025-5-20'],
				text: {
					year: '年',
					month: '月',
					week: ['一', '二', '三', '四', '五', '六', '日'],
					today: '今'
				},
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth(), // 月
				dates: [], // 当前月日期集合
				positionTop: 0,
				monthOpen: true,
				choose: '',
				coachlist: [
					{
						age: "",
						coach_avatar: "https://sass-test.doit10019.com/upload/202407/06004351-81110426723619765.png?attname=youyong.png",
						coach_honor: "13815212401",
						full_name: "游泳教练",
						id: 98,
						id_card: "",
						sex: 1,
						venue:'苏州体育中心'
					},
					{
						age: "",
						coach_avatar: "https://sass-test.doit10019.com/upload/81/fcba52dcbacb08e7d6e803297752c1.jpg?attname=%E5%AE%A2%E6%9C%8D%E4%BA%BA%E5%91%98+%288%29.jpg",
						coach_honor: "13815212401",
						full_name: "新教练",
						id: 280,
						id_card: "",
						sex: 2,
						venue:'南通体育中心'
					},
					{
						age: "",
						coach_avatar: "https://sass-test.doit10019.com/upload/e0/4409decd0453eaa19c2ccfd8f680a9.jpg?attname=%E8%AF%81%E4%BB%B6%E7%85%A7%E7%89%87-%E7%99%BD%E5%BA%95+%287%29.jpg",
						coach_honor: "13815212401",
						full_name: "大法师",
						id: 305,
						id_card: null,
						sex: 2,
						venue:'南京体育中心'
					}
				],
				cgshow:false,
				showFilterPopup: false,
				selectId1: null,
				weekList1: [],
				selectId2: null,
				weekList2: [],
				selectId3:null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				area_id: '', //所属校区
				train_program: '', //项目
				status: '', //状态
				coach_id: '', //教练
				course_id: '', //课程
				class_name: '', //班级名称
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				forDay:[],
				un_consume_num:'',
				total_num:'',
				sign_num:'',
				Cardlist:[],
				keyword:'',
				isAllSelect: false, //是否全选
				selectList: [],
				applicantlist: [],
				hour_id: "",
				course_date: '',
				completeList: [],
				leaveList: [],
				EliminatioPopup: false,
				schedulelist: [],
				text1: '日期时间未到，暂无消课记录',
				text2: '日期时间已到，暂无消课记录',
				scheduleslist:[],
				selected_Tab: 1,
				selected_Tab22: 1,
				enrollDetailPopup: false,
				Cardlist: [],
				activeTab: 0,
				schedules: [],
				studentlist: [],
				venue_id:''
			};
		},
		created() {
			this.dates = this.monthDay(this.y, this.m) 
			!this.open && this.trgWeek()
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth()
			let d = date.getDate()
			this.choose = `${y}-${m + 1}-${d}`
		},
		computed: {
			currentMonthText() {
				return `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() + 1}月`;
			},
			// 顶部星期栏目
			weekDay() {
				return this.text.week.slice(this.weekstart - 1).concat(this.text.week.slice(0, this.weekstart - 1))
			},
			height() {
				return (this.dates.length / 7) * 80 + 'upx'
			}
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
			console.log(this.itemChooselist,'this.itemChooselist')
			this.indata()
			this.cls_options()
			this.time_hour()
		},
		methods: {
			addstudent(){
				uni.navigateTo({
					url:'./detail?venue_id=' + this.venue_id
				})
			},
			confirm1(data) {
				this.venue_id = data
			    console.log(data, 'data');
			    // 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
			    const selectedItem = this.venuelist.find(item => item.id === data);
			    if (selectedItem) {
			        // 将找到的场馆对象赋值给 itemChooselist
			        this.itemChooselist = selectedItem;
			    } else {
			        console.log(`未找到 id 为 ${data} 的场馆对象`);
			    }
			    this.time_hour()
			},
			async time_hour() {
				
				let that = this;
				if (this.listQuery.pageNo == 1) that.Cardlist = [];
				let params = {
					venue_id: this.venue_id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					date:this.forDay,
					course_date:this.choosess,
					area_id: this.area_id, //所属校区
					train_program: this.train_program, //项目
					status: this.status, //状态
					coach_id: this.coach_id, //教练
					// course_id: this.course_id, //课程
					keyword: this.keyword, //班级名称
					hour_status:this.course_id,
				};
				let res = await train.time_hour(params);
				if (res.code == 1) {
					that.Cardlist = that.Cardlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
					
					
					const convertedDates =  res.data.statInfo.hourDates.map(date => {
					    const [year, month, day] = date.split('-');
					    return `${year}-${parseInt(month)}-${parseInt(day)}`;
					});
					
					console.log(convertedDates);
					this.truancyeddates =convertedDates
					this.sign_num = res.data.statInfo.sign_num
					this.total_num = res.data.statInfo.total_num
					this.un_consume_num = res.data.statInfo.un_consume_num
				}
			},
			search(e) {
				console.log(e, 'e')
				this.keyword = e
				this.time_hour()
			},
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.time_hour()
			},
			indata(){
				// 获取当前日期对象
				const now = new Date();
				const currentYear = now.getFullYear();
				const currentMonth = now.getMonth(); // 注意：月份是从 0 开始计数（0 代表 1 月，1 代表 2 月，以此类推）
				
				// 获取当前月份的第一天
				const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
				const year1 = firstDayOfMonth.getFullYear();
				const month1 = String(firstDayOfMonth.getMonth() + 1).padStart(2, '0');
				const day1 = String(firstDayOfMonth.getDate()).padStart(2, '0');
				const formattedFirstDay = `${year1}-${month1}-${day1}`;
				
				// 获取当前月份的最后一天
				const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
				const year2 = lastDayOfMonth.getFullYear();
				const month2 = String(lastDayOfMonth.getMonth() + 1).padStart(2, '0');
				const day2 = String(lastDayOfMonth.getDate()).padStart(2, '0');
				const formattedLastDay = `${year2}-${month2}-${day2}`;
				
				const currentDay = now.getDate();
				const currentMonthStr = String(currentMonth + 1).padStart(2, '0');
				const currentDayStr = String(currentDay).padStart(2, '0');
				const formattedCurrentDay = `${currentYear}-${currentMonthStr}-${currentDayStr}`;
				
				this.forDay = [formattedFirstDay,formattedLastDay]
				this.choosess = formattedCurrentDay
				console.log('当前月份的第一天:', formattedFirstDay,this.forDay);
				console.log('当前月份的最后一天:', formattedLastDay);
				 console.log('当天日期:', formattedCurrentDay);
			},
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.weekList1 = res.data.areaList
					this.weekList2 = res.data.projectList
					this.weekList3 = res.data.statusList
					this.weekList4 = res.data.coachList
					this.weekList5 = res.data.classHourStatusList
				}
			},
			openFilter() {
				this.showFilterPopup = true;
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
				this.time_hour()
			},
			timesSelect2(item, index) {
				if (this.selectId2 === index) {
					this.selectId2 = null;
					this.train_program = ''
				} else {
					this.selectId2 = index
					this.train_program = item.id
				}
				this.time_hour()
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status = ''
				} else {
					this.selectId3 = index
					this.status = index
				}
				this.time_hour()
			},
			timesSelect4(item, index) {
				if (this.selectId4 === index) {
					this.selectId4 = null;
					this.coach_id = ''
				} else {
					this.selectId4 = index
					this.coach_id = item.id
				}
				this.time_hour()
			},
			timesSelect5(item, index) {
				if (this.selectId5 === index) {
					this.selectId5 = null;
					this.course_id = ''
				} else {
					this.selectId5 = index
					this.course_id = index
				}
				this.time_hour()
			},
			// 获取当前月份天数
			monthDay(y, m) {
				let firstDayOfMonth = new Date(y, m, 1).getDay() // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m + 1, 0).getDate() // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m, 0).getDate() // 上一月的最后一天
				let dates = [] // 所有渲染日历
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart // 方便进行日期计算，默认星期从0开始
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: j,
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: m,
						year: y,
						lm: true
					})
				}
				return dates
			},
			// 迟到处理
			isLateed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.lateddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.lateddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},
			// 旷课处理
			isTruancyed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.truancyeddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.truancyeddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},

			omcddates(y, m, d) {
				let flag = false
				for (let i = 0; i < this.chidaodates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.chidaodates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},

			isToday(y, m, d) {
				let date = new Date()
				return y == date.getFullYear() && m == date.getMonth() && d == date.getDate()
			},
			// 切换成周模式
			trgWeek() {
				this.monthOpen = !this.monthOpen
				if (this.monthOpen) {
					this.positionTop = 0
				} else {
					let index = -1
					this.dates.forEach((i, x) => {
						this.isToday(i.year, i.month, i.date) && (index = x)
					})
					this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80
				}
			},
			// 点击回调
			selectOne(i, event) {
				let date = `${i.year}-${i.month + 1}-${i.date}`
				this.choose = date
				
				const parts = date.split('-');
				    const yearss = parts[0];
				    let monthss = parts[1];
				    let dayss = parts[2];
				
				    if (monthss.length === 1) {
				        monthss = '0' + monthss;
				    }
				    if (dayss.length === 1) {
				        dayss = '0' + dayss;
				    }
				    this.choosess = `${yearss}-${monthss}-${dayss}`;
				
				console.log(this.choose, 'this.choose')
				console.log(this.choose, 'this.choose')
				
				this.time_hour()
			},
			// 上个月，下个月
			turning(_action) {
				if (_action === 'next') {
					if (this.m + 1 == 12) {
						this.m = 0
						this.y = this.y + 1
					} else {
						this.m = this.m + 1
					}
				} else {
					if (this.m + 1 == 1) {
						this.m = 11
						this.y = this.y - 1
					} else {
						this.m = this.m - 1
					}
				}
				console.log(this.y, this.m + 1)
				this.dates = this.monthDay(this.y, this.m)
				console.log(this.dates,'this.dates')
				
				const year = this.y;
				const month = this.m + 1;
				const result = this.getFirstAndLastDay(year, month);
				console.log('指定月份的第一天:', result.firstDay);
				console.log('指定月份的最后一天:', result.lastDay);
				this.forDay = [result.firstDay,result.lastDay]
				this.time_hour()
				
			},
			getFirstAndLastDay(year, month){
				const firstDay = new Date(year, month - 1, 1);
				  const year1 = firstDay.getFullYear();
				  const month1 = String(firstDay.getMonth() + 1).padStart(2, '0');
				  const day1 = String(firstDay.getDate()).padStart(2, '0');
				  const formattedFirstDay = `${year1}-${month1}-${day1}`;
				
				  // 获取指定月份的最后一天
				  const lastDay = new Date(year, month, 0);
				  const year2 = lastDay.getFullYear();
				  const month2 = String(lastDay.getMonth() + 1).padStart(2, '0');
				  const day2 = String(lastDay.getDate()).padStart(2, '0');
				  const formattedLastDay = `${year2}-${month2}-${day2}`;
				
				  return {
				    firstDay: formattedFirstDay,
				    lastDay: formattedLastDay
				  };
			},
			// 日历点击
			handleChildClick(date) {
				console.log('父组件收到子组件的点击事件，日期为:', date);
				this.riqidate = date
				this.riliInfo = true
				this.dropdownmenu = false
				this.dropmenu = true
				this.products = []
				this.keyword = ''
			},
			oncourse(course, index) {
				// this.hour_id = course.id
				// this.enrollDetailPopup = true
				// this.revert_sub()
				// this.trainstu()
				uni.navigateTo({
					url: `../class/adddetail?classroom=${encodeURIComponent(JSON.stringify(course))}` +
						"&venue_id=" + this.venue_id+
						"&hour_id=" + course.id+
						"&course_date=" + course.course_date +
						"&week_name=" + course.week_name+
						"&start_time=" + course.start_time+
						"&end_time=" + course.end_time+
						"&id=" + course.class_id
				})
			},
			closeInfo() {
				this.enrollDetailPopup = false
			},
			previousMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() - 1);
				this.currentDate = newDate;
			},
			nextMonth() {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() + 1);
				this.currentDate = newDate;
			},
			getCoursesCount(date) {
				return this.monthCourses[date]?.length || 0;
			},
			closehome_Info() {
				this.showFilterPopup = false;
			},
			toggleDateSelection(date) {
				if (this.selectedDate === date) {
					this.selectedDate = null;
				} else {
					this.selectedDate = date;
				}
			},
			onSearch() {
				console.log('搜索内容:', this.searchText);
			},
			onChangelist(item) {
				this.itemChoose = item
				this.listQuery.pageNo = 1
				this.itemChooselist = this.itemChoose
				this.show = false
			},
			chooseStudent(item) {
				this.coach_list = item
				this.cgshow = false
			},
			async handAskLeave(state) {
				if (this.applicantlist != '') {
					let params = {
						hour_id: this.hour_id,
						course_date: this.course_date,
						stuInfos: this.applicantlist,
						stu_type: 1
					};
					console.log(params, 'params')
					let res = await train.trainsub(params);
					if (res.code == 1) {
						this.studentlist = []
						this.completeList = []
						this.leaveList = []
						this.selectList = []
						this.applicantlist = []
						this.time_hour()
						this.trainstu()
					}
				} else {
					uni.showModal({
						title: '请选择学员',
						icon: 'none'
					})
				}
			
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			onschedules(schedule, index) {
				console.log(schedule, 'schedule')
				// this.applicantlist = []
				// this.studentlist = []
				// this.selectList = []
				// this.hour_id = schedule.id
				// this.course_date = schedule.course_date
				// this.trainstu()
				// this.enrollDetailPopup = true
				uni.navigateTo({
					url: `../class/adddetail?classroom=${encodeURIComponent(JSON.stringify(schedule))}` +
						"&venue_id=" + this.venue_id+
						"&hour_id=" + schedule.id+
						"&course_date=" + schedule.course_date 
				})
			
			},
			closehomeInfo() {
				this.enrollDetailPopup = false
			
			},
			// 撤销
			revertSub(type) {
				let that = this
				uni.showModal({
					title: '是否确认撤销！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							if (that.applicantlist != '') {
								let params = {
									hour_id: that.hour_id,
									course_date: that.course_date,
									stuInfos: that.applicantlist,
									stu_type: type
								};
								console.log(params, 'params')
								train.revert_sub(params).then(res => {
									if (res.code == 1) {
										that.studentlist = []
										that.applicantlist = []
										that.completeList = []
										that.leaveList = []
										that.selectList = []
										that.time_hour()
										that.trainstu()
									}
								})
							} else {
								uni.showModal({
									title: '请选择学员',
									icon: 'none'
								})
							}
			
						}
					}
				})
			
			},
			toggle(item) {
				console.log(item, 'item')
				if(this.selected_Tab22 == 1){
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.studentlist.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}
					
					})
				}else if(this.selected_Tab22 == 2){
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.completeList.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}
					
					})
				}else if(this.selected_Tab22 == 3){
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.leaveList.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}
					
					})
				}
				
				// this.applicant = this.applicantlist.toString()
			},
			change(event) {
				console.log(event, 'event')
				
				if(this.selected_Tab22 == 1){
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.studentlist.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}
					
						})
					
					})
				}else if(this.selected_Tab22 == 2){
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.completeList.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}
					
						})
					
					})
					
				}else if(this.selected_Tab22 == 3){
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.leaveList.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}
					
						})
					
					})
				}
			},
			allChange1(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.studentlist.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.studentlist.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},
			allChange2(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.completeList.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.completeList.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},
			allChange3(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.leaveList.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.leaveList.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},
			selectedTab(item, index) {
				this.selected_Tab = item
				this.status = item
				this.activeTab = index
				this.listQuery.pageNo = 1
				if (this.activeTab == 0) {
					this.time_hour()
				} else if (this.activeTab == 1) {
				} else if (this.activeTab == 2) {
					this.time_hour11()
				}
			},
			selectedTab22(item, index) {
				this.applicantlist = []
				this.studentlist = []
				this.selectList = []
				this.selected_Tab22 = item
				this.activeTab22 = index
				this.listQuery.pageNo = 1
				this.trainstu()
			},
			onElimination(schedule, index) {
				this.schedulelist = schedule
				this.EliminatioPopup = true
			},
			onclasses() {
				let that = this
				uni.showModal({
					title: '是否确认结课！',
					content: '此操作不可逆！',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								hour_id: that.schedulelist.id
							};
							console.log(params, 'params')
							train.confcomplete(params).then(res => {
								if (res.code == 1) {
									that.EliminatioPopup = false
									that.time_hour()
									that.trainstu()
								}
							})
							
						}
					}
				})
			},
			offclasses() {
				this.EliminatioPopup = false
			},
			closeEliminatio() {
				this.EliminatioPopup = false
			},
			async revert_leave(item, index) {
				let that = this
				uni.showModal({
					title: '是否确认撤销！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: item.id
							};
							console.log(params, 'params')
							train.revert_leave(params).then(res => {
								if (res.code == 1) {
									that.time_hour()
									that.trainstu()
								}
							})
						}
					}
				})
			},
			async onleave(item, index) {
				let that = this
				uni.showModal({
					title: '是否确认请假！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								hour_id: that.hour_id,
								deduct_num: item.deduct_num,
								course_date: that.course_date,
								student_id: item.id
							};
							console.log(params, 'params')
							train.train_leave(params).then(res => {
								if (res.code == 1) {
									that.time_hour()
									that.trainstu()
								}
							})
						}
					}
				})
			},
			async revert_sub() {
				let params = {
					hour_id: this.hour_id
				};
				let res = await train.trainstu(params);
				if (res.code == 1) {
					this.studentlist = res.data.list
					this.completeList = res.data.completeList
					this.leaveList = res.data.leaveList
				}
			},
			async trainstu() {
				let params = {
					hour_id: this.hour_id
				};
				let res = await train.trainstu(params);
				if (res.code == 1) {
					this.studentlist = res.data.list
					this.completeList = res.data.completeList
					this.leaveList = res.data.leaveList
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100vh;
	}

	.page {
		min-height: 100%;
		background-color: #f9fafb;
		// padding-bottom: 120rpx;
	}
	
	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;
	}
	
	.filter-item {
		margin-bottom: 24rpx;
	}
	
	.item {
		// padding: 29rpx 30rpx 30rpx;
		// padding: 0 20rpx 20rpx 20rpx;
	
		.atinput {
			// border: #EBECEE 1rpx solid;
			font-size: 24rpx;
			height: 60rpx;
			width: 600rpx;
			padding-left: 20rpx;
		}
	
		.item-title {
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
	
		.value {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
		}
	
		.time-cell {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
			justify-content: flex-start;
	
			.time {
				width: 49%;
	
				&:last-of-type {
					margin-left: 20rpx;
				}
			}
		}
	
		.week-list {
			flex-direction: row;
			width: 100%;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;
	
			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}
	
			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.header-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	.content {
		padding: 20rpx 20rpx 0;
	}
	
	.box_11 {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		padding: 0 20rpx;
		align-items: center;
	
		// .image-wrapper_7 {
		// 	width: 541rpx;
		// 	height: 60rpx;
		// 	flex-direction: row;
		// 	display: flex;
		// 	margin-top: 15rpx;
		// }
		.image-wrapper_7 {
			width: 600rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
		}
	
		.label_list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 80rpx;
	
			.label_7 {
				width: 36rpx;
				height: 36rpx;
			}
	
			.label_77 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}
	
		.label8_list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 80rpx;
	
			.label_8 {
				width: 36rpx;
				height: 36rpx;
			}
	
			.label_88 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.coach-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.coach-info {
		display: flex;
		align-items: center;
	}

	.exchange {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		color: rgb(234, 248, 248);
		font-size: 24rpx;
	}

	.coach-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.coach-detail {
		margin-left: 32rpx;
		flex: 1;
	}

	.coach-name-wrap {
		display: flex;
		align-items: center;
	}

	.coach-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.coach-phone {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.coach-tag {
		margin-top: 16rpx;
	}

	.tag-text {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 32rpx;
	}

	.search-section {
		margin-bottom: 32rpx;
	}

	.search-wrap {
		margin-bottom: 24rpx;
	}

	.filter-wrap {
		display: flex;
		gap: 16rpx;
		overflow-x: auto;
	}

	.view-toggle {
		display: flex;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 4rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.toggle-btn {
		padding: 12rpx 32rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.toggle-btn.active {
		background-color: #3b82f6;
		color: #fff;
	}

	.course-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.course-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
	}

	.course-main {
		flex: 1;
	}

	.course-time {
		display: flex;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.time-tag {
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.period-tag {
		background-color: #ebf5ff;
		color: #3b82f6;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.course-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.course-tags {
		display: flex;
		gap: 16rpx;
		margin-top: 16rpx;
		flex-wrap: wrap;
	}

	.info-tag {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background-color: #f3f4f6;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
	}

	.info-tag.purple {
		background-color: #f3e8ff;
		color: #9333ea;
	}

	.info-tag.amber {
		background-color: #fef3c7;
		color: #d97706;
	}
	.info-tag.amberz {
		background-color: #ebf5ff;
		color: #3b82f6;
	}

	.course-status {
		margin-left: 32rpx;
		text-align: right;
	}

	.status-tag {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-tag.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.status-tag.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.attendance {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.calendar-view {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.calendar-title {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.month-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	.attendance-text {
		font-size: 24rpx;
		color: #666;
	}

	.calendar-nav {
		display: flex;
		gap: 16rpx;
	}

	.nav-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.nav-btn:active {
		background-color: #f3f4f6;
	}

	.weekday-row {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		margin-bottom: 8rpx;
	}

	.weekday {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		padding: 16rpx 0;
	}

	.date-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8rpx;
		position: relative;
	}

	.date-cell {
		position: relative;
	}

	.date-content {
		aspect-ratio: 1;
		border: 2rpx solid #e5e7eb;
		border-radius: 16rpx;
		padding: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.date-content.selected {
		border-color: #3b82f6;
		background-color: #ebf5ff;
	}

	.date-number {
		font-size: 24rpx;
		color: #666;
	}

	.date-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #3b82f6;
		border-radius: 50%;
		margin-top: 8rpx;
	}

	.course-popup {
		position: absolute;
		z-index: 10;
		left: 0;
		top: calc(100% + 16rpx);
		width: 480rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 2rpx solid #e5e7eb;
		padding: 24rpx;
	}

	.popup-course {
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #e5e7eb;
	}

	.popup-course:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.popup-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.popup-time,
	.popup-class,
	.popup-date {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.popup-count {
		display: flex;
		gap: 16rpx;
		font-size: 24rpx;
		color: #666;
	}

	.popup-status {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.popup-status.signed {
		background-color: #dcfce7;
		color: #16a34a;
	}

	.popup-status.unsigned {
		background-color: #fef9c3;
		color: #ca8a04;
	}

	.footer {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		// padding: 24rpx 32rpx;
		background-color: #fff;
		border-top: 2rpx solid #e5e7eb;
		border-radius: 0 0 30rpx 30rpx;
	}

	.add-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	/deep/ .good-box {
		height: 60vh;
		padding: 0px 30rpx;
		display: flex;
		flex-direction: column;
		
		.student-list {
			margin-top: 40rpx;
			max-height: 600rpx;
			min-height: 530rpx;
		
			.student-item {
				background-color: #f3f3f3;
				padding: 50rpx 40rpx;
				border-radius: 20rpx;
				height: 145rpx;
		
				&+.student-item {
					margin-top: 30rpx;
				}
		
				.name {
					font-size: 23rpx;
					font-weight: bold;
					margin-right: 20rpx;
		
				}
		
				.name_s {
					font-size: 25rpx;
					font-weight: bold;
					margin-right: 20rpx;
					color: #0055ff;
		
				}
		
				.course {
					color: #c1c1c1;
					font-size: 22rpx;
					margin-top: 10rpx;
				}
		
				.course_s {
					color: #ffaa7f;
					font-size: 22rpx;
				}
			}
		}

		.title {
			color: #000;
			font-size: 30rpx;
			font-weight: 700;
			margin-top: 40rpx;
		}

		.van-radio__label {
			line-height: inherit;
		}

		.good-list {
			flex: 1;
			height: 0;
			overflow: auto;

			.good-item {
				margin-top: 30rpx;

				.info {
					margin-left: 25rpx;

					.address {
						color: #fff;
						padding-top: 20rpx;
						padding-right: 30rpx;
						height: 70rpx;

						&-name {
							font-size: 34rpx;
							font-weight: 700;
							line-height: 34rpx;
						}

						&-desc {
							margin-top: 18rpx;
							font-size: 22rpx;
							line-height: 22rpx;
						}

						.exchange {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, 0.2);
							color: rgb(234, 248, 248);
							font-size: 24rpx;
						}
					}

					.name {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
					}


					.tag {
						color: rgb(4, 179, 90);
						font-size: 24rpx;
						font-weight: 500;
						padding: 0px 10rpx;
						margin-right: 20rpx;
						background-color: rgba(4, 179, 90, 0.2);
						border-radius: 4rpx;

						&:nth-of-type(2) {
							color: rgb(236, 70, 246);
							background-color: rgba(236, 70, 246, 0.2);
						}
					}

					.address {
						margin-top: 10rpx;
						color: rgb(136, 136, 136);
						font-size: 22rpx;
					}
				}

			}
		}

		.footer {
			padding: 20rpx 0;
			background-color: rgb(255, 255, 255);

			.btn {
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				font-weight: 700;
				padding: 20rpx 0;
				text-align: center;
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
			}
		}
	}

	.calendar {
		color: #000000;
		font-size: 28upx;
		text-align: center;
		// background-image: url('https://oss.szsportscenter.cn/img/zx11.png');
		// background-size: 100% 100%;
		background-color: #FFFFFF;
		// padding: 0 50upx 30upx 50upx;
		height: auto;

		.top-bar {
			display: flex;
			height: 70upx;

			>view {
				flex: 1;
			}

			.top-bar-ym {
				font-size: 32upx;
				height: 70upx;
				line-height: 70upx;
				font-weight: 700;
			}

			.top-bar-ym1 {
				font-size: 24upx;
				height: 70upx;
				line-height: 70upx;
				margin-left: 20rpx;
			}

			.top-change-month {
				// height: 80upx;
				// width: 80upx;
				// margin: 0 60upx;
				height: 40rpx;
				width: 40rpx;
				margin: 10px 20rpx;
			}
		}

		.week {
			display: flex;
			align-items: center;
			height: 70upx;
			line-height: 70upx;

			view {
				flex: 1;
			}

			.week-day {
				font-size: 24upx;
				// color: #A9C4FF;
				color: #000000;
			}
		}

		.content {
			position: relative;
			overflow: hidden;
			transition: height 0.4s ease;

			.days {
				transition: top 0.3s;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;

				.item {
					position: relative;
					display: block;
					height: 70upx;
					line-height: 70upx;
					width: calc(100% / 7);

					.day {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 80rpx;
						height: 60rpx;
						line-height: 46rpx;
						overflow: hidden;
						border-radius: 14upx;
						border: 2rpx solid #e5e7eb;
						color: #000000;

						&.choose {
							// background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677 !important;
							border-color: #3b82f6;
							background-color: #ebf5ff;
							// background-size: 100% 100%;
							// background-image: url('https://oss.szsportscenter.cn/img/zx16.png') !important;
							color: #000000;
							// border-radius: 50%;
							width: 80rpx;
							height: 60rpx;
						}

						&.choose1 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx17.png');
							// background-size: 100% 100%;
							background-color: rgb(216, 175, 161);
							width: 80rpx;
							height: 60rpx;
							color: #FFFFFF;
							// border-radius: 50%;
						}

						&.choose2 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx18.png');
							background-size: 100% 100%;
							// background-image: url('https://oss.szsportscenter.cn/img/huo.gif') ;
							background-color: rgb(70, 166, 255);
							width: 80rpx;
							height: 60rpx;
							color: #FFFFFF !important;
							/* 确保文字颜色为白色 */
							// border-radius: 50%;
						}

						&.nolm {
							color: #f0f0f0;
							// opacity: 0.3;
						}
					}

					.late2 {
						bottom: 9rpx;
						left: 50%;
						font-style: normal;
						width: 12upx;
						height: 12upx;
						// background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
						background: #2658ff;
						border-radius: 6upx;
						position: absolute;
						margin-left: -6upx;
						pointer-events: none;
					}

					.late1 {
						bottom: 8rpx;
						left: 50%;
						font-style: normal;
						width: 12upx;
						height: 12upx;
						background: #ff0000;
						border-radius: 6upx;
						position: absolute;
						margin-left: -6upx;
						pointer-events: none;
					}

					.truancy {
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}

					.today-text {
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}
				}
			}
		}

		.hide {
			// height: 70upx !important;
		}

		.weektoggel {
			width: 70upx;
			height: 40upx;
			margin: 10upx auto 0;

			&.down {
				transform: rotate(180deg);
			}
		}
	}

	.choose2 {
		color: #FFFFFF !important;
	}
	.tab-filter {
		background-color: #ffffff;
		padding: 32rpx 32rpx 20rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius: 30rpx;
	}
	
	.tabs {
		display: flex;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.tab-item {
		padding: 16rpx 20rpx;
		margin-right: 20rpx;
		position: relative;
	}
	.tabitem {
		position: relative;
	}
	
	.tab-item.active {
		color: #2979ff;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: #2979ff;
	}
	
	.filter {
		display: flex;
		justify-content: flex-end;
		margin-top: 16rpx;
	}
	
	.course-list {
		padding: 20rpx 20rpx 0 20rpx;
	}
	
	.course-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx 0 0 0;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.class-name {
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.class-name.warning {
		color: #ff4d4f;
	}
	
	.class-name.warning1 {
		color: #3083ff;
	}
	
	.class-id {
		font-size: 24rpx;
		color: #999999;
		margin-right: 16rpx;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
	
	.class-desc {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
		display: block;
	}
	
	.card-body {
		margin-top: 24rpx;
	}
	
	.course-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.course-name {
		font-size: 28rpx;
		color: #666666;
		margin-left: 10rpx;
	}
	
	.course-date {
		font-size: 24rpx;
		color: #999999;
	}
	
	.teacher-info,
	.hours-info {
		display: flex;
		gap: 32rpx;
		margin-top: 16rpx;
	}
	
	.info-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
	}
	
	.teacher-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		margin-right: 8rpx;
	}
	
	.warning {
		color: #ff4d4f;
	}
	
	.warning1 {
		color: #3083ff;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 64rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}
	
	.empty-image {
		width: 240rpx;
		height: 240rpx;
	}
	
	.empty-text {
		color: #999999;
		font-size: 28rpx;
		margin: 32rpx 0;
	}
	
	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;
	}
	
	.filter-item {
		margin-bottom: 24rpx;
	}
	
	.item {
		// padding: 29rpx 30rpx 30rpx;
		padding: 0 0 20rpx 20rpx;
	
		.atinput {
			// border: #EBECEE 1rpx solid;
			font-size: 24rpx;
			height: 60rpx;
			width: 600rpx;
			padding-left: 20rpx;
		}
	
		.item-title {
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
	
		.value {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
		}
	
		.time-cell {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
			justify-content: flex-start;
	
			.time {
				width: 49%;
	
				&:last-of-type {
					margin-left: 20rpx;
				}
			}
		}
	
		.week-list {
			flex-direction: row;
			width: 55vw;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;
	
			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}
	
			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}
	
			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
	}
	
	.filter-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
		.view-type {
			display: flex;
			gap: 16rpx;
		}
		
		.detail-content {
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 32rpx;
			max-height: 80vh;
		}
		
		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
		}
		
		.detail-title {
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.tab-content {
			margin-top: 32rpx;
		}
		
		.schedule-item,
		.student-item,
		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 2rpx solid #f0f0f0;
		}
		
		.schedule-time,
		.student-info,
		.record-info {
			display: flex;
			flex-direction: column;
		}
		
		.date {
			font-size: 28rpx;
		}
		
		.time {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
		
		.schedule-status {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}
		
		.attendees {
			font-size: 24rpx;
			color: #999999;
		}
		
		.student-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
		
		.student-detail,
		.record-detail {
			margin-left: 16rpx;
		}
		
		.student-name {
			font-size: 28rpx;
			font-weight: 500;
		}
		
		.student-phone,
		.record-time {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
		
		.student-hours {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 24rpx;
			color: #666666;
			gap: 8rpx;
		}
		
		.record-hours {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		
		.record-hours .course-name {
			font-size: 28rpx;
			font-weight: 500;
		}
		
		.record-hours .hours {
			font-size: 24rpx;
			color: #2979ff;
			margin-top: 8rpx;
		}
		
		.record-summary {
			text-align: right;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666666;
		}
		
		.storepopup {
			.enroll-detail-popup {
				// width: 600rpx;
				// background: #ffffff;
				// border-radius: 16rpx;
				overflow: hidden;
			}
		
			.enroll-detail-title {
				font-size: 16px;
				color: #333333;
				font-weight: 500;
				text-align: left;
				padding: 30rpx;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				flex-direction: row;
			}
		
			.enroll-detail-content {
				padding: 0 30rpx 30rpx 30rpx;
				max-height: 800rpx;
				overflow-y: auto;
			}
		
			.detail-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 24rpx;
				line-height: 1.5;
			}
		
			.detail-item:last-child {
				margin-bottom: 0;
			}
		
			.detail-label {
				width: 140rpx;
				flex-shrink: 0;
				color: #999999;
				font-size: 14px;
			}
		
			.detail-value {
				flex: 1;
				color: #333333;
				font-size: 14px;
			}
		
			.remark-item {
				align-items: flex-start;
			}
		
			.remark-item .detail-value {
				word-break: break-all;
			}
			
		}
		.enroll-detail-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #f0f0f0;
		}
				
		.close-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #007AFF;
			color: #ffffff;
			font-size: 16px;
			border-radius: 8rpx;
			border: none;
		}
		.min-h-screen {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			background-color: #f3f4f6;
		}
		
		.space-y-4>*+* {
			margin-top: 32rpx;
		}
		
		.bg-white {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 32rpx;
		}
		
		.text-base {
			font-size: 28rpx;
			line-height: 40rpx;
		}
		
		.font-medium {
			font-weight: 500;
		}
		
		.text-gray-400 {
			color: #9ca3af;
		}
		
		.text-gray-600 {
			color: #4b5563;
		}
		
		.text-xs {
			font-size: 24rpx;
			line-height: 32rpx;
			// margin-top: 10rpx;
		}
		
		.active11 {
			color: #ff0000;
		}
		
		.mt-1 {
			margin-top: 8rpx;
		}
		
		.mt-2 {
			margin-top: 16rpx;
		}
		
		.mt-3 {
			margin-top: 24rpx;
		}
		
		.ml-1 {
			margin-left: 8rpx;
		}
		
		.ml-2 {
			margin-left: 16rpx;
		}
		
		.ml-3 {
			margin-left: 24rpx;
		}
		
		.space-x-2>*+* {
			margin-left: 16rpx;
		}
		
		.space-x-4>*+* {
			margin-left: 32rpx;
		}
		
		.w-6 {
			width: 48rpx;
		}
		
		.h-6 {
			height: 48rpx;
		}
		
		.w-8 {
			width: 64rpx;
		}
		
		.h-8 {
			height: 64rpx;
		}
		
		.rounded-full {
			border-radius: 9999rpx;
		}
		
		.border-b {
			border-bottom: 1rpx solid #e5e7eb;
		}
		
		.py-2 {
			padding: 16rpx 24rpx 16rpx 24rpx;
		}
		
		.text-right {
			text-align: right;
		}
		
		.text-blue-500 {
			color: #3b82f6;
		}
		
		.text-green-500 {
			color: #22c55e;
		}
		
		.text-red-500 {
			color: #ef4
		}
	}
	
	
</style>